<template>
  <div class="app-container">
    <div class="filter-container">
      <span class="filter-title filter-item">操作版块</span>
      <k-select
        v-model="listQuery.sysSection"
        class="filter-item room-type"
        type="1"
        :select-params="sysSectionList"
        @handleSelectEvent="handleSectionFilter"
      />

      <span class="filter-title filter-item">操作模块</span>
      <k-select
        v-model="listQuery.sysModule"
        class="filter-item user-status"
        type="1"
        :custom-params="{
          opations: belongList,
          label: 'lineName',
          value: 'lineName',
        }"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">操作时间</span>
      <k-date-picker v-model="timeValue" class="filter-item" />
      <k-input
        v-model.trim="listQuery.userName"
        class="filter-item"
        is-search
        placeholder="请输入用户名"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>
    <!--表格相关 -->
    <el-table
      :data="tableData"
      fit
      border
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 20px"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column min-width="60px" type="selection" align="center" />
      <el-table-column
        min-width="60px"
        type="index"
        label="序号"
        align="center"
      />
      <el-table-column
        prop="sysSection"
        min-width="150px"
        label="操作版块"
        align="center"
      />
      <el-table-column
        prop="sysModule"
        min-width="150px"
        label="操作模块"
        align="center"
      />
      <el-table-column
        prop="sysOperation"
        min-width="200px"
        label="操作内容"
        align="center"
      />
      <el-table-column
        prop="userName"
        min-width="100px"
        label="操作人"
        align="center"
      />
      <el-table-column
        prop="createTime"
        min-width="120px"
        label="操作时间"
        align="center"
      />
      <el-table-column prop="ip" min-width="120px" label="IP" align="center" />
      <el-table-column min-width="100px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button
              class="table-btn"
              value="详情"
              @click.native="logDetail(scope.row)"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
    <!-- 查看详情 -->
    <k-dialog
      :show-hide.sync="logDetailshowHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="detail-dialog"
      title="详情"
      :show-foot="false"
      :two-btn="false"
    >
      <el-form label-width="100px" class="content">
        <el-form-item label="操作方法:">
          <span>{{ logInfo.method }}</span>
        </el-form-item>
        <el-form-item label="请求参数:">
          <span>{{ logInfo.requestParam }}</span>
        </el-form-item>
        <el-form-item label="返回参数:">
          <span>{{ logInfo.returnParam }}</span>
        </el-form-item>
      </el-form></k-dialog
    >
  </div>
</template>

<script>
import { listSysLogData } from "@/api/settings/settings";
import Pagination from "@/components/Pagination";

export default {
  components: { Pagination },
  data() {
    return {
      sysSectionList: [
        { label: "信息管理版块", value: "信息管理版块" },
        { label: "用户管理版块", value: "用户管理版块" },
        { label: "玩法管理版块", value: "玩法管理版块" },
        { label: "福利系统版块", value: "福利系统版块" },
        { label: "数据管理版块", value: "数据管理版块" },
        { label: "饰品库版块", value: "饰品库版块" },
        { label: "数字卡库版块", value: "数字卡库版块" },
        { label: "公司主播管理", value: "公司主播管理" },
        { label: "其他设置", value: "其他设置" },
        { label: "角色权限管理", value: "角色权限管理" },
      ],
      tableData: [],
      belongList: [],
      totalRows: 0,
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: "",
          start: "",
        },
        sort: "", // 排序字段 为对应列名,
        direction: "", // 排序 正向(asc)逆向(desc),
        startTime: undefined, // 开始时间',
        endTime: undefined, // 结束时间',
        sysSection: undefined, // 版块',
        sysModule: undefined, // 模块',
        userName: undefined, // 操作人名称'
      },
      timeValue: "",
      logDetailshowHide: false,
      logInfo: {
        method: undefined,
        requestParam: undefined,
        returnParam: undefined,
      },
    };
  },
  watch: {
    // 时间赋值
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null;
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null;
    },
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      listSysLogData(this.listQuery).then((res) => {
        const originList = res.data;
        this.totalRows = originList.totalRows;
        this.tableData = originList.rows;
      });
    },
    logDetail(row) {
      this.logDetailshowHide = true;
      this.logInfo = row;
    },
    handleSectionFilter(value) {
      if (!value) return;
      this.$log("----------", value);
      this.belongList = [];
      switch (value) {
        case "信息管理版块":
          this.belongList = [
            { lineName: "站内信息" },
            { lineName: "玩法说明" },
            { lineName: "banner管理" },
          ];
          break;
        case "用户管理版块":
          this.belongList = [
            { lineName: "普通用户" },
            { lineName: "合作用户" },
            { lineName: "管理员" },
            { lineName: "限制消费用户" },
          ];
          break;
        case "玩法管理版块":
          this.belongList = [
            { lineName: "心跳时刻" },
            { lineName: "Roll房福利" },
            { lineName: "欧皇战场" },
            { lineName: "箱子配置" },
            { lineName: "晶粹商城" },
          ];
          break;
        // case "弹药商城版块":
        //   this.belongList = [{ lineName: "弹药商城" }];
        //   break;
        case "福利系统版块":
          this.belongList = [
            { lineName: "多码红包码" },
            { lineName: "手气红包码" },
            { lineName: "奖励红包码" },
            { lineName: "活动红包码" },
            { lineName: "注册红包码" },
            { lineName: "VIP系统" },
          ];
          break;
        case "数据管理版块":
          this.belongList = [
            { lineName: "对战房间记录" },
            { lineName: "对战玩家记录" },
            { lineName: "对战开箱记录" },
            { lineName: "玩家背包记录" },
            { lineName: "饰品提取记录" },
            { lineName: "推广结算记录" },
            { lineName: "玩家消费记录" },
            { lineName: "玩家余额记录" },
            { lineName: "玩家消耗记录" },
            { lineName: "玩家帮吗记录" },
          ];
          break;
        case "饰品库版块":
          this.belongList = [
            { lineName: "市场饰品库" },
            { lineName: "平台饰品库" },
          ];
          break;
        case "数字卡库版块":
          this.belongList = [
            { lineName: "平台数字卡库" },
            { lineName: "确权记录" },
          ];
          break;
        case "公司主播管理":
          this.belongList = [
            { lineName: "查看公司" },
            { lineName: "公司管理" },
          ];
          break;
        case "其他设置":
          this.belongList = [
            { lineName: "相关设置" },
            { lineName: "字典管理" },
            { lineName: "支付配置" },
            { lineName: "操作日志" },
          ];
          break;
      }
      this.$log("----------", this.belongList);
      this.handleFilter();
    },
    handleFilter() {
      this.listQuery.pager.pageNo = 1;
      this.loadData();
    },
  },
};
</script>
<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1d143c; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .kInput {
    position: absolute;
    right: 20px;
  }
  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162e;
  }
  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }
  .room-type,
  .user-status,
  .account-status {
    margin-right: 20px;
  }
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 80px 100px;
}
</style>
